<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>报表</el-breadcrumb-item>
      <el-breadcrumb-item>收支明细表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20"
              class="query">
        <el-col :span="7">
          <el-date-picker v-model="rangedDate"
                          type="daterange"
                          value-format='yyyy-MM-dd'
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary"
                     @click="search">查询
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success"
                     @click="clear">重置
          </el-button>
        </el-col>
      </el-row>

      <!-- 列表区域 -->
      <el-table :data="list"
                height="600"
                border
                ref="table"
                show-summary
                :summary-method="getSummaries">
        <el-table-column label="日期" prop="issueDate"></el-table-column>
        <el-table-column label="单据编号" width="200" prop="issueCode"></el-table-column>
        <el-table-column label="收支类别" prop="businessTypeName"></el-table-column>
        <el-table-column label="收支项目" prop="categoryName"></el-table-column>
        <el-table-column align="center" label="收入" width="150">
          <template slot-scope="scope" v-if="scope.row.businessType == 'income'">
            <template prop="amount">
              {{ scope.row.amount }}
            </template>
          </template>
        </el-table-column>
        <el-table-column align="center" label="支出" width="150">
          <template slot-scope="scope" v-if="scope.row.businessType != 'income'">
            <template prop="amount">
              {{ scope.row.amount }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="relatedUnit"></el-table-column>
        <el-table-column label="摘要" prop="remark"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 参数对象
      params: {
        current: '' + this.currentPage4,
        size: '' + 100,
        obj: {
          name: '',
          startDate: '',
          endDate: ''
        }
      },
      currentPage4: 1,
      total: 1,
      size: 100,
      list: [],
      rangedDate: [],
      startDate: '',
      endDate: '',
      sums: ''
    }
  },
  watch: {},
  created() {
  },
  mounted() {
    let params = this.$route.query.params
    if (params !== undefined) {
      if (params.categoryId !== undefined) {
        this.params.categoryId = params.categoryId
      }
      this.rangedDate[0] = params.startDate
      this.rangedDate[1] = params.endDate
    }

    this.search()
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
    })
  },
  methods: {
    // 搜索
    search() {
      if (this.rangedDate.length !== 0) {
        this.startDate = this.rangedDate[0]
        this.endDate = this.rangedDate[1]
      } else {
        this.startDate = ''
        this.endDate = ''
      }
      this.params = {
        current: '' + this.currentPage4,
        size: '' + this.size,
        obj: {
          startDate: this.startDate,
          endDate: this.endDate
        }
      }
      this.getList()
    },
    // 清空
    clear() {
      this.rangedDate = []
      this.params = {}
      this.getList()
    },
    // 获取列表
    async getList() {
      this.list = [];
      const {data: result} = await this.$http.post('/analysis/flow/detailList', this.params)
      if (!result.success) return this.$message.error(result.message)

      this.list = result.data.recordList.records
      this.sums = result.data.sums
      this.total = result.data.recordList.total;
      this.currentPage4 = result.data.recordList.current;
    },
    // 计算合计
    getSummaries(param) {
      var res = [];
      res[0] = '合计';
      for (var i = 0; i < this.sums.length; i++) {
        var str = this.sums[i]
        if (str.businessType == 'income') {
          res[4] = str.amount;
        } else {
          res[5] = str.amount;
        }
      }
      return res
    },
    rowClick(row) {
      if (row.businessType === 'income') {
        this.$router.push({
          path: '/income/save',
          query: {incomeId: row.businessId}
        })
      } else if (row.businessType === 'expense') {
        this.$router.push({
          path: '/expense/save',
          query: {expenseId: row.businessId}
        })
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.search();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.search();
    },
  }
}
</script>

<style lang="less">
.query {
  margin-bottom: 20px;
}

.el-select {
  width: 100%;
}

.el-date-editor.el-range-editor {
  width: 100%;
}

.el-table tr {
  cursor: pointer;
}
</style>
